<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            background: #000;
            position: absolute;
            left:50%;
            margin-left: -250px;
            top:50%;
            margin-top: -200px;
        }
        *{
            PADDING:0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .bg{
            position: relative;
            height: 100%;
            background: #000;
        }
    </style>
</head>
<body>
<div class="bg">
    <canvas width="500" height="400" id="canvas" style="">
        您的浏览器不支持canvas，请更新！
    </canvas>
</div>

</body>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth=15;
        ctx.strokeStyle="#aaa";
        ctx.font="30px sans-serif";
        ctx.fillStyle="#fff";
        ctx.arc(250,200,100,0,2*Math.PI);
        ctx.stroke();
        var start=-90;
        var end=-90;
        var str=""+parseInt((end+90)/360*100)+"%";
        var width=ctx.measureText(str).width;
        ctx.fillText(str,250-width/2,215);
        var timer= setInterval(function () {
            end+=5;
            ctx.clearRect(0,0,500,400);
            str=""+parseInt((end+90)/360*100)+"%";
            width=ctx.measureText(str).width;
            ctx.fillText(str,250-width/2,215);
            ctx.beginPath();
            ctx.lineWidth=15;
            ctx.strokeStyle="#aaa";
            ctx.arc(250,200,100,0,2*Math.PI);
            ctx.stroke();
            ctx.beginPath();

            ctx.arc(250,200,100,start*Math.PI/180,end*Math.PI/180);
            ctx.strokeStyle="green";
            ctx.stroke();
            if(end>=270){
                clearInterval(timer);
            }
        },100)

</script>
</html>